<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="/ehome/static/css/layui.css"/>
    <script src="/ehome/static/layui.js"></script>
    <script src="../lib/jquery-3.1.1.min.js"></script>
    <script>
        //Demo
        layui.use('form', function(){
             $=layui.jquery
                ,form = layui.form;

            //监听提交
            form.on('submit(insert)', function(obj){
                $.ajax({
                    url:"/ehome/sysUser/insert"
                    ,type:"POST"
                    ,dataType: "json"
                    ,contentType:"application/json;charset=UTF-8" // 后端用RequestBody接收时要加上
                    ,data:JSON.stringify(obj.field)
                    ,success: function(returndata){
                        console.log(returndata)
                        layer.msg(returndata.msg);
                        if(returndata.code=="0"){
                            console.log(returndata.msg);;
                        }else{
                            console.log(returndata.msg);
                        }
                    },error:function(e){
                        console.log(e)
                    }
                });
                return false;
            });
        });
    </script>
</head>
<body>


<script>
    layui.use('upload', function(){
        var upload = layui.upload,$=layui.$;

        //执行实例
        var uploadInst = upload.render({
            elem: '#upload_btn' //绑定元素
            ,url: '/ehome/upload' //上传接口
            //当图片选好之后,显示预览就需要before配置
            ,before: function(obj){
                obj.preview(function (index, file, result) {
                    $('#imgPreview').attr('src', result); //图片链接（base64）
                });
            }
            // 当图像上传完成后的回调
            ,done: function(res){
                if (res.code == 0){
                    console.log(res.fileName)
                    $("input[name=avatar]").val(res.fileName)
                    return layer.msg('文件上传成功!');
                }else if (res.code == 2) {
                    return layer.msg('不支持该上传类型');
                }else if (res.code == 3) {
                    return layer.msg('文件为空');
                }else {
                    return layer.msg('文件上传异常');
                }
            }
            ,error: function(){
                //请求异常回调
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });
    });
</script>
<form class="layui-form" action="">
    <div class="layui-form-item" style="width: 500px">
        <label class="layui-form-label" >选择分店</label>
        <div class="layui-input-block">
            <select name="companyId" lay-verify="required">
                <option value="0">武侯店</option>
                <option value="1">金牛店</option>
                <option value="2">青羊店</option>
                <option value="3">温江店</option>
                <option value="4">双流店</option>
                <option value="5">华阳店</option>
                <option value="6">其他...</option>

            </select>
        </div>
    </div>
        <div class="layui-form-item" style="width: 500px">
            <label class="layui-form-label">用户类型</label>
            <div class="layui-input-block">
                <select name="type" lay-verify="required">
                    <option value="0">管理人员</option>
                    <option value="1">客服</option>
                    <option value="2">派送员</option>
                    <option value="3">其他</option>
                </select>
            </div>
        </div>
    <div class="layui-form-item" style="width: 500px">
        <label class="layui-form-label">工号</label>
        <div class="layui-input-block">
            <input type="text" value="" name="jobNumber" required  lay-verify="required"  autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item" style="width: 500px">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-block">
            <input type="text" value="" name="userName" required  lay-verify="required"  autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" style="width: 500px">
        <label class="layui-form-label">手机号</label>
        <div class="layui-input-block">
            <input type="text" value="" name="phoneNumber" required  lay-verify="required"  autocomplete="off" class="layui-input"  maxlength="11">
        </div>
    </div>
    <div class="layui-form-item" style="width: 500px">
        <label class="layui-form-label">身份证</label>
        <div class="layui-input-block">
            <input type="text" value="" name="idCard" required  lay-verify="required" autocomplete="off" class="layui-input"  maxlength="18">
        </div>
    </div>

    <div class="layui-form-item" style="width: 500px">
        <label class="layui-form-label">初始密码</label>
        <div class="layui-input-block">
            <input type="password" value="" name="password" required lay-verify="required"  autocomplete="off" class="layui-input">
        </div>
    </div>
    <input type="text" name="avatar">
    <div class="layui-upload">
        <button type="button" class="layui-btn" id="upload_btn">上传图片</button>
        <div class="layui-upload-list">
            <img class="layui-upload-img" id="imgPreview">
            <!--显示重新加载字样的p标签-->
            <p id="demoText"></p>
        </div>
    </div>
    <div class="layui-form-item" style="width: 500px">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="insert">确认添加</button>
        </div>
    </div>
</form>
</body>
</html>